<template>
  <div class="scoped-container">
    <nav>
      <button id="navigation">
        <h3>
          <span id="category"></span>
          <i class="fa fa-angle-right nav-arrow" aria-hidden="true"></i>
          <span id="algorithm"></span>
          <i class="fa fa-caret-down nav-dropdown" aria-hidden="true"></i>
        </h3>
      </button>
      <div class="top-menu-buttons">
        <button id="btn_online">
          <i class="fa fa-share" aria-hidden="true"></i>
          <span class="btn-text">上线</span>
        </button>
        <button id="btn_refuse">
          <i class="fa fa-close" aria-hidden="true"></i>
          <span class="btn-text">拒绝</span>
        </button>
        <button id="btn_run">
          <i class="fa fa-play" aria-hidden="true"></i>
          <span class="btn-text"></span>
        </button>
        <button id="btn_prev">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
          <span class="btn-text">后退</span>
        </button>
        <button id="btn_pause">
          <i class="fa fa-pause" aria-hidden="true"></i>
          <span class="btn-text"></span>
        </button>
        <button id="btn_next">
          <span class="btn-text">前进</span>
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        <div class="btn">
          <div class="wrapper">
            执行间隔: <input type="number" value="" id="interval"> 秒
          </div>
        </div>
        <div class="btn" id="btn_fullscreen">
          <div class="wrapper">
            <i class="fa fa-arrows-alt"></i>
            <span class="btn-text">全屏</span>
          </div>
        </div>
      </div>
    </nav>
    <section class="sidemenu active">
      <div class="search_bar_container">
        <i class="fa fa-search" aria-hidden="true"></i>
        <input type="text" id="search-bar" autofocus/>
      </div>
      <div id="list">
      </div>
      <div id="footer">
        <button class="category open" id="powered-by">
          <i class="fa fa-fw fa-github"></i> Powered by ...
        </button>
        <div id="powered-by-list">
          <a href="https://github.com/algorithm-visualizer/algorithm-visualizer">
            <button class="indent">algorithm-visualizer</button>
          </a>
          <a href="https://github.com/jquery/jquery">
            <button class="indent">jquery/jquery</button>
          </a>
          <a href="https://github.com/ajaxorg/ace">
            <button class="indent">ajaxorg/ace</button>
          </a>
          <a href="https://github.com/jacomyal/sigma.js">
            <button class="indent">jacomyal/sigma.js</button>
          </a>
          <a href="https://github.com/chartjs/Chart.js">
            <button class="indent">chartjs/Chart.js</button>
          </a>
          <a href="https://github.com/Daniel15/babel-standalone">
            <button class="indent">Daniel15/babel-standalone</button>
          </a>
          <a href="https://github.com/showdownjs/showdown">
            <button class="indent">showdownjs/showdown</button>
          </a>
          <a href="https://github.com/FortAwesome/Font-Awesome">
            <button class="indent">FortAwesome/Font-Awesome</button>
          </a>
          <a href="https://github.com/simonwhitaker/github-fork-ribbon-css">
            <button class="indent">simonwhitaker/github-fork-ribbon-css</button>
          </a>
          <a href="https://github.com/mathjax/MathJax">
            <button class="indent">mathjax/MathJax</button>
          </a>
        </div>
      </div>
    </section>
    <div class="workspace">
      <div class="viewer_container">
        <section class="tab_bar">
          <button class="tab_button" id="btn_desc" data-target="#tab_desc">算法描述</button>
          <button class="tab_button active" id="btn_trace" data-target="#tab_module">可视化</button>
        </section>
        <section class="tab_container">
          <div class="tab" id="tab_doc">
            <div class="wrapper">
            </div>
          </div>

          <div class="tab" id="tab_desc">
            <Editor
              key="viewer"
              id="viewer"
              v-model="markdown"
              class="markdown"
              :readOnly="true"
              theme="bubble"
            />
          </div>
          <div class="tab module_container active" id="tab_module">
          </div>
        </section>
      </div>
      <div class="editor_container">
        <section class="files_bar">
          <button class="tab_button btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
          <button class="tab_button btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
          <div class="wrapper">
          </div>
        </section>
        <section class="explanation_container">
          <span id="explanation"></span>
        </section>
        <section class="data_container">
          <pre id="data"></pre>
        </section>
        <section class="code_container">
          <pre id="code"></pre>
        </section>
        <section class="template_container">
          <pre id="template"></pre>
        </section>
      </div>
    </div>
    <div class="toast_container">
    </div>
  </div>
</template>

<script>
import '@/js/app/index.js'
import '@/js/create/index.js'
import '@/js/dom/index.js'
import '@/js/editor/index.js'
import '@/js/module/index.js'
import '@/js/server/index.js'
import '@/js/tracer_manager/index.js'
import '@/js/utils/index.js'
import init from '@/js/index.js'

export default {
  name: "index",
  data() {
    return {
      value: "",
    };
  },
  watch: {
  },
  created() {
    this.styleTag = document.createElement("link");
    this.styleTag.rel = "stylesheet";
    this.styleTag.href = "/stylesheet.css";
    document.head.appendChild(this.styleTag);
  },
  methods: {
  },
  computed: {
    markdown: {
      get() {
        const val = this.$store.getters.markdown;
        return val;  // 读取值
      },
      set(value) {
        // this.$bus.$emit("markdown", value);
        this.$store.commit("markdown/SET_VALUE", value);  // 通过 action 设置值
      }
    }
  },
  mounted() {
    this.$store.commit("markdown/SET_ISREVIEWING", true);
    init();
  },
  beforeDestroy() {
    if (this.styleTag) {
      document.head.removeChild(this.styleTag);
    }
  },
  destroyed() {

  },
  components: {  }
}
</script>


<style scoped>
@import '../../css/font-awesome.min.css';
@import '../../css/gh-fork-ribbon.css';
@import "https://fonts.googleapis.com/css?family=Roboto";

.markdown {
  border: none;
  height: 100vh;
}
button.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.options-menu {
  position: absolute;
  display: none;  /* 初始时隐藏菜单 */
  background-color: rgb(36, 36, 36);  /* 背景颜色与现有风格一致 */
  border: 1px solid #505050;  /* 边框颜色与现有风格一致 */
  padding: 8px 16px;  /* 内边距统一 */
  z-index: 9999;  /* 确保菜单在其他元素之上 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);  /* 阴影效果与现有一致 */
  display: flex;
  flex-direction: column;  /* 设置按钮竖直排列 */
  gap: 4px;  /* 按钮之间的间距 */
}

.options-menu button {
  display: block;
  width: 100%;  /* 按钮占据整个容器的宽度 */
  padding: 8px;
  margin: 0;  /* 清除按钮的默认外边距 */
  background: rgba(0, 0, 0, 0.15);  /* 按钮背景与现有按钮风格一致 */
  border: none;
  color: rgb(187, 187, 187);  /* 按钮文字颜色与整体文字一致 */
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.options-menu button:hover {
  background: rgb(63, 63, 63);  /* 悬停效果一致 */
}

.options-menu button.active {
  background: rgb(36, 36, 36);  /* 激活状态与现有按钮一致 */
}

.share-popup {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: rgb(36, 36, 36);
  border: 1px solid #505050;
  border-radius: 4px;
  z-index: 9999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 260px;
  font-size: 13px;

  padding-bottom: 50px;
}

.share-popup .form-actions {
  position: absolute;
  bottom: 10px;
  right: 16px;
}

.share-popup label {
  display: flex;
  flex-direction: column;
}

.share-popup select,
.share-popup input {
  background: #1e1e1e;
  color: #eee;
  border: 1px solid #444;
  padding: 4px 6px;
  margin-top: 4px;
}

.share-popup button {
  background: #444;
  color: #fff;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.share-popup button:hover {
  background: #666;
}


</style>
